import { Map, APILoader, Marker, GeolocationControl, Control } from "@uiw/react-baidu-map";
import { useState, } from "react";
import { centerPoint, points } from "../Info/Info";
import "../Position/Position.css"
import { useHistory } from "react-router-dom";
import { Button } from "@material-ui/core";

export function Forecast() {
    let history = useHistory();
    const navigate = (i: number) => {
        history.push('/chart/' + i)
    }
    return <div className="MyMap">
        <APILoader akay="GzlPHk1eLYhZhLz6fs4ebQnNOPU9mzG6">
            <Map enableMapClick={false}  enableScrollWheelZoom center={centerPoint}>
                <GeolocationControl />
                {
                    points.map((element, i) => <Marker key={i} onClick={() => navigate(i)} position={element.point} type="loc_red"></Marker>)
                }
                <Control anchor={0}>
                    <Button variant="contained" color="secondary" onClick={() => history.goBack()}>←</Button>
                </Control>
            </Map>
        </APILoader>
    </div>
}